<template>
    <section class="page-container"  >
        <p class="page-title">{{this.$route.name}}</p>
        <el-form :inline="true" :model="searchForm">
            <el-form-item label="参数名">
                <el-input v-model="searchForm.arguName" placeholder="参数名"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="searchArgu()">查询</el-button>
                <el-button @click="reset()">重置</el-button>
            </el-form-item>
        </el-form>
        <el-table
                :data="arguTableData"
                style="width: 100%"
                height="578"
        >
            <el-table-column type="index"  width="50"></el-table-column>
            <el-table-column label="参数名称"  prop="arguName"></el-table-column>
            <el-table-column label="参数类型" prop="arguType"></el-table-column>
            <el-table-column label="参数值"  prop="arguValue"></el-table-column>
            <el-table-column label="备注"  prop="remark"></el-table-column>
            <el-table-column label="上次操作人"  prop="operator"></el-table-column>
            <el-table-column label="上次操作时间"  prop="operatedTime" :formatter="dateFormat"></el-table-column>
            <el-table-column>
                <template slot="header">
                    <el-button type="primary" icon="el-icon-plus" size="small" @click="addArgu()">新增参数</el-button>
                </template>
                <template slot-scope="scope">
                    <el-button size="mini" @click="handleEdit(scope.row)" type="primary" icon="el-icon-edit">编辑</el-button>
                    <el-button size="mini" type="danger" @click="handleDelete(scope.row)" icon="el-icon-delete">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="pageSizes"
                    :page-size="10"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="30">
            </el-pagination>
        </div>
        <el-dialog :title="diaTitle" :visible.sync="showDialog" :close-on-click-modal=false @close="cancelArguForm" width="40%">
            <el-form :model="arguForm" status-icon :rules="rules" ref="arguForm" label-width="100px" class="demo-dynamic">
                <el-form-item label="参数名称:" :label-width="formLabelWidth" prop="arguName">
                    <el-input v-model="arguForm.arguName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="参数类型:" :label-width="formLabelWidth" prop="arguType">
                    <el-input v-model="arguForm.arguType" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="参数值:" :label-width="formLabelWidth" prop="arguValue">
                    <el-input v-model="arguForm.arguValue" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="备注:" :label-width="formLabelWidth" prop="remark">
                    <el-input v-model="arguForm.remark" autocomplete="off" type="textarea"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancelArguForm">取 消</el-button>
                <el-button type="primary" @click="submitForm('arguForm')" :loading="arguFormLoading">保 存</el-button>
            </div>
        </el-dialog>
    </section>
</template>

<script>

    export default {
        name: "arguManager",
        data() {
            return {
                arguTableData: [

                ],
                searchForm: {
                    arguName: ''
                },
                diaTitle: '新增参数',
                currentPage: 1,
                requestMethod: 'post',
                pageSizes: [10, 20, 50, 100],
                showDialog: false,
                formLabelWidth: '120px',
                arguFormLoading: false,
                arguForm: {
                    arguId: '',
                    arguName: '',
                    arguType: '',
                    arguValue: '',
                    remark: ''
                },
                rules: {
                    arguName: [
                        {
                            required: true,
                            message: '请输入参数名',
                            trigger: 'blur'
                        }
                    ],
                    arguType: [
                        {
                            required: true,
                            message: '请输入参数类型',
                            trigger: 'blur'
                        }
                    ],
                    arguValue: [
                        {
                            required: true,
                            message: '请输入参数值',
                            trigger: 'blur'
                        }
                    ]
                }
            }
        },
        created() {
            this.$http({
                url: '/sysargu/sysargus',
                method: 'get',
                params: {

                }
            }).then((response) => {
                this.arguTableData = response;
            })
        },
        methods: {
            handleEdit(row) {
                this.diaTitle = '编辑参数';
                this.arguForm.arguId = row.arguId;
                this.arguForm.arguName = row.arguName;
                this.arguForm.arguType = row.arguType;
                this.arguForm.arguValue = row.arguValue;
                this.arguForm.remark = row.remark;
                this.showDialog = true;
                this.requestMethod = 'put';
            },
            handleDelete(row) {
                let arguId = row.arguId;
                this.$confirm('将删除参数'+row.arguName+', 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$http({
                        url: '/sysargu/sysargu/'+arguId,
                        method: 'delete',
                        params: {}
                    })
                    .then(() => {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.searchArgu();
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            addArgu() {
                this.diaTitle = '新增参数';
                this.arguForm.arguId = '';
                this.arguForm.arguName = '';
                this.arguForm.arguType = '';
                this.arguForm.arguValue = '';
                this.arguForm.remark = '';
                this.showDialog = true;
                this.requestMethod = 'post';
            },
            searchArgu() {
                this.$http({
                    url: '/sysargu/sysargu/conditions/',
                    method: 'get',
                    params: {
                        arguName: this.searchForm.arguName
                    }
                }).then((response) => {
                    this.arguTableData = response;
                })
            },
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.addOrEditArgu();
                    } else {
                        return false;
                    }
                });
            },
            addOrEditArgu() {
                this.arguFormLoading = true;
                this.$http({
                    url: '/sysargu/sysargu',
                    method: this.requestMethod,
                    data: this.$qs.stringify(this.arguForm)
                }).then(() => {
                    this.$message({
                        type: 'success',
                        message: '操作成功!'
                    });
                    this.showDialog = false;
                    this.searchArgu();
                    this.arguFormLoading = false;
                }).catch(()=>{
                    this.arguFormLoading = false;
                })
            },
            handleSizeChange(pageSize) {
                console.log(pageSize)
            },
            handleCurrentChange(currentPage) {
                console.log(currentPage)
            },
            reset(){
                this.searchForm.arguName = '';
            },
            dateFormat(row, column){
                const daterc = row[column.property]
                const data = new Date(daterc);
                if(daterc!=null){
                    var Y = data.getFullYear() + '-';
                    var M = (data.getMonth()+1 < 10 ? '0'+(data.getMonth()+1) : data.getMonth()+1) + '-';
                    var D = (data.getDate() < 10 ? '0'+data.getDate() : data.getDate()) + ' ';
                    var h = (data.getHours() < 10 ? '0'+data.getHours() : data.getHours()) + ':';
                    var m = (data.getMinutes() < 10 ? '0'+data.getMinutes() : data.getMinutes()) + ':';
                    var s = (data.getSeconds() < 10 ? '0'+data.getSeconds() : data.getSeconds());
                    return Y+M+D+h+m+s;
                }

            },
            cancelArguForm(){
                this.showDialog = false;
                this.$refs['arguForm'].resetFields();
            }
        }
    }
</script>

<style scoped>

</style>